<template>
  <div class="indexpage">
    <!-- 调用公共头部组件 -->
    <AdminHeaderCom/>

    <!-- 主题 -->
    <main>
<!-- 左侧：公共侧导航栏 -->
<AdminAsideCom/>

<router-view/>

    </main>
  </div>
</template>

<script setup>
import AdminHeaderCom from "@/components/admin/public/AdminHeaderCom.vue";
import AdminAsideCom from "@/components/admin/public/AdminAsideCom.vue";
import { ref, onMounted } from 'vue';

const userInfo = ref({
  nickname: '',
  username: ''
});
const formattedTime = ref('');

onMounted(() => {
  // 从localStorage获取用户数据
  const userData = localStorage.getItem('user');
  if (userData) {
    try {
      const parsedData = JSON.parse(userData);
      userInfo.value = {
        nickname: parsedData.nickname,
        username: parsedData.username, 
      };
      
      // 格式化当前时间
      const now = new Date();
      formattedTime.value = `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
    } catch (error) {
      console.error('解析用户数据失败:', error);
    }
  }
});

// 补零函数
function padZero(num) {
  return num < 10 ? `0${num}` : num;
}
</script>

<style scoped>
.indexpage{
  width: 100%;
  height: 99vh;
  overflow: hidden;
}
.indexpage main{
  width: 100%;
  height: 80vh;
  display: flex;
}
.wrapper{
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), 
              url("../../assets/img/bj.jpg");
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
.table{
  padding-left: 20%;
  padding-top: 20%;
}
#building{
  opacity: 0.5;
}
</style>